<template>
	<view class="">

		<view class="title-con">
			<view class="jiantou" @click="fanhui">
				<img src="../Home/生活图片/cxy1_16.png">
			</view>
			<view class="title">
				市场详情
			</view>
			<view class="title-right">
				<view class="wx">
					<img src="../Home/生活图片/cxy_12.png">
				</view>
				<view class="wx">
					<img src="../Home/生活图片/cxy_14.png">
				</view>
				<view class="wx">
					<img src="../Home/生活图片/cxy_13.png" @click="fx">
				</view>
			</view>
		</view>
		<view class="xinpin-con">

			<view class="xinpin">
				<p>￥20.00</p>
				<view class="xinpin-img">
					新品
				</view>

			</view>
			<view class="xiangqing">
				绑带平底鞋平抵鞋；各种颜色可供选择；细带绑带装 饰；尖头；踝部绑带；鞋跟高度 1.1 厘米。
			</view>
		</view>
		<view class="xiangqing-img">
			<img src="./市场/cxy_11.png" @click="bigimg">
		</view>
		<view class="xiangqing-img">
			<img src="./市场/cxy_11.png" @click="bigimg">
		</view>
		<view class="liuyan-con">
			<view class="liuyan">
				<view class="liuyan-title">
					<view class="liuyan-title-img">
						<img src="./市场/cxy_24.png">
					</view>
					<p>留言</p>
				</view>
				<view class="liuyan-content" v-for="(item,index) in list" :key="index">
					<view class="liuyan-top">
						<view class="liuyan-top-left">
							<view class="liuyan-top-img">
								<img :src="item.img">
							</view>
							<p>{{item.name}}</p>
						</view>
						<view class="liuyan-top-right">
							{{item.time}}
						</view>
					</view>
					<view class="liuyan-p">
						{{item.content}}
					</view>
				</view>
				<view class="liuyan-bottom">
					<view class="liuyan-text">
						<input type="text" placeholder="写点什么吧" class="liuyan-input" v-model="value" />
					</view>
					<view class="liuyan-fs" @click="sendout">
						发送
					</view>
				</view>
			</view>
		</view>
		<!-- 图片遮罩层 -->
		<view class="mask" v-show="Vshow" @click="smallimg">
			<view class="img">
				<img src="./市场/cxy_11.png">
			</view>
		</view>
		<!-- 分享遮罩层 -->
		<view class="fenxiang-con" v-show="fenxiang" @click="fenxx">
			<view class="fenxiang">
				<view class="fenxiang-biaoti">
					分享至
				</view>
				<view class="fenxiang-list" @click="fenx">
					<view class="fenxiang-img">
						<img src="./市场/cxy_12.png">
					</view>
					<view class="fenxiang-img-p">
						微信好友
					</view>
				</view>
				<view class="fenxiang-list" @click="fenx">
					<view class="fenxiang-img">
						<img src="../Home/生活图片/cxy_14.png">
					</view>
					<view class="fenxiang-img-p">
						微信朋友圈
					</view>
				</view>
				<view class="fenxiang-list" @click="fenx">
					<view class="fenxiang-img">
						<img src="./市场/cxy_13.png">
					</view>
					<view class="fenxiang-img-p">
						QQ好友
					</view>
				</view>
				<view class="fenxiang-list" @click="fenx">
					<view class="fenxiang-img">
						<img src="./市场/cxy_14.png">
					</view>
					<view class="fenxiang-img-p">
						QQ空间
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [],
				Vshow: false,
				fenxiang: false,
				value: ''
			}

		},
		onShow() {
			this.cxyscliuyan()
		},
		methods: {
			cxyscliuyan() {
				this.$api.getcxyscliuyan().then((res) => {
					this.list = res.data
					console.log(this.list)
				})
			},
			// 图片放大
			bigimg() {
				this.Vshow = true

			},
			smallimg() {
				this.Vshow = false
			},
			// 分享
			fx() {
				this.fenxiang = true
			},
			fenx() {
			 uni.showToast({
					icon: "success",
					title: '分享成功！'
				})
				this.fenxiang = false
			},
			// 返回上一页
			fanhui() {
				uni.switchTab({
					url: '/pages/questions/questions'
				})
			},
			fenxx(){
				 this.fenxiang=false
			},
			sendout() {
				const time = new Date().getTime()
				const timeFormat = uni.$u.timeFormat
				this.nowdate1 = timeFormat(time, 'yyyy-mm-dd')
				this.nowTime1 = timeFormat(time, 'hh:mm:ss')
				this.$api.cxyscliuyanGT({
				 	img: 'http://127.0.0.1:7001/public/cxyimg/cxy_10.png',
					content: this.value,
					time: this.nowTime1,
					name: '小红',
				}).then((res) => {
					this.value = ''
					this.cxyscliuyan()
				})

			},

		},
	}
</script>

<style>
	.mask {
		width: 100%;
		height: 100%;
		/* background: rgba(175, 175, 175, 0.5); */
		background-color: #000000;
		position: fixed;
		top: 0;

	}

	.img {
		width: 90%;
		height: 699upx;
		background-color: #d08109;
		margin: 114px auto;
	}

	.img img {
		width: 100%;
		height: 100%;
	}

	.fenxiang-con {
		width: 100%;
		height: 100%;
		background: rgba(175, 175, 175, 0.5);
		/* background-color: #000000; */
		position: fixed;
		top: 0;
	}

	.fenxiang {
		width: 246upx;
		height: 336upx;
		/* background-color: #d08109; */
		position: relative;
		left: 66%;
		top: 6%;
		background-image: url("./市场/cxy_25.png");
		background-size: 91%;
		background-repeat: no-repeat;
		background-position: center;
		text-align: center;

	}

	.fenxiang .fenxiang-biaoti {
		line-height: 70upx;
	}

	.fenxiang-list {
		width: 90%;
		height: 60upx;
		/* background-color: #d08109; */
		margin: 6upx auto;
		display: flex;
		border-bottom: 1px solid #cccccc;

	}

	.fenxiang-img {
		width: 40upx;
		height: 38upx;
		/* background-color: royalblue; */
		margin-left: 20upx;
		margin-top: 10upx;

	}

	.fenxiang-img img {
		width: 100%;
		height: 100%;
	}

	.fenxiang-img-p {
		margin-left: 20upx;
		line-height: 54upx;
	}

	.con {
		width: 100%;
		height: 159px;
		background-color: #f2f2f2;
		position: absolute;
	}

	.title-con {
		width: 100%;
		height: 112upx;
		/* background-color: antiquewhite; */
		display: flex;
		justify-content: space-between;
		border-bottom: 1px solid #faab34;
	}

	.title {
		width: 33%;
		height: 100%;
		/* background-color: antiquewhite; */
		/* margin-left: 30upx; */
		line-height: 61px;
		text-align: center;
		font-size: 38upx;
		margin-left: -30upx;
		/* margin-top: 20upx; */
	}

	.jiantou {
		width: 33%;
		height: 90%;
		/* background-color: aquamarine; */
	}

	.jiantou img {
		width: 9%;
		height: 41%;
		margin-top: 24upx;
		margin-left: 20upx;
	}

	.title-right {
		width: 29%;
		height: 90%;
		/* background-color: blue; */
		display: flex;
		justify-content: space-around;

	}

	.wx {
		width: 40upx;
		height: 38upx;
		/* background-color: aqua; */
		margin-top: 16upx;
		margin-left: 20upx;

	}

	.wx img {
		width: 100%;
		height: 100%;
	}

	.xinpin-con {
		width: 100%;
		height: 144upx;
		/* background-color: aqua; */
	}

	.xinpin {
		width: 100%;
		height: 66upx;
		/* background-color: red; */
		display: flex;
	}

	.xinpin p {
		font-size: 36upx;
		color: #faab34;
		line-height: 68upx;
		margin-left: 20upx;
	}

	.xinpin-img {
		width: 110upx;
		height: 50upx;
		// background-color: peru;
		background-image: url('./市场/cxy_23.png');
		background-size: 82%;
		background-repeat: no-repeat;
		background-position: center;
		text-align: center;
		color: #fff;
		font-size: 20upx;
		line-height: 46upx;
		margin-top: 12upx;

	}

	.xiangqing {
		font-size: 28upx;
		/* text-indent: 20upx; */
		margin-left: 20upx;
	}

	.xiangqing-img {
		width: 75%;
		height: 526upx;
		background-color: aqua;
		margin: 20upx auto;
	}

	.xiangqing-img img {
		width: 100%;
		height: 100%;
	}

	.liuyan-con {
		width: 100%;
		height: 463upx;
		background-color: #f2f2f2;
		border-top: 1px solid #f2f2f2;
	}

	.liuyan {
		width: 100%;
		height: 95%;
		background-color: #ffffff;
		margin-top: 20upx;
		/* position: absolute; */
	}

	.liuyan-title {
		width: 100%;
		height: 69upx;
		/* background-color: antiquewhite; */
		border-bottom: 1px solid #f2f2f2;
		display: flex;
	}

	.liuyan-title-img {
		width: 45upx;
		height: 45upx;
		/* background-color: aquamarine; */
		margin-top: 4upx;
		margin-left: 20upx;
	}

	.liuyan-title-img img {
		width: 100%;
		height: 100%;
	}

	.liuyan-title p {
		font-size: 34upx;
		margin-left: 20upx;
		margin-top: 6upx;
	}

	.liuyan-content {
		width: 100%;
		height: 180upx;
		/* background-color: blueviolet; */
		border-bottom: 1px solid #f2f2f2;
	}

	.liuyan-top {
		width: 100%;
		height: 81upx;
		/* background-color: aquamarine; */
		display: flex;
	}

	.liuyan-top-left {
		width: 50%;
		height: 100%;
		/* background-color: yellowgreen; */
		display: flex;
	}

	.liuyan-top-left p {
		margin-left: 20upx;
		line-height: 70upx;
	}

	.liuyan-top-right {
		width: 50%;
		height: 100%;
		/* background-color: beige; */
		line-height: 76upx;
		text-align: center;
		color: #cccccc;
		font-size: 20upx;

	}

	.liuyan-top-img {
		width: 70upx;
		height: 72upx;
		/* background-color: aquamarine; */
		margin-left: 20upx;
	}

	.liuyan-top-img img {
		width: 100%;
		height: 100%;
	}

	.liuyan-bottom {
		width: 100%;
		height: 95upx;
		background-color: #f7f7f7;

		border-top: 1px solid #999999;
		position: relative;
		top: 22%;
		display: flex;
	}

	.liuyan-text {
		width: 69%;
		height: 74upx;
		/* background-color: green; */
		margin-top: 10upx;
		border-radius: 14upx;
		margin-left: 20upx;
	}

	.liuyan-fs {
		width: 23%;
		height: 74upx;
		background-color: #faab34;
		border-radius: 14upx;
		margin-left: 20upx;
		margin-top: 10upx;
		text-align: center;
		color: #fff;
		line-height: 60upx;
		font-size: 30upx;
		border: 1px solid #d08109;
	}

	.liuyan-text .liuyan-input {
		width: 100%;
		height: 70upx;
		background-color: #ffff;
		border: 1px solid #999999;
		border-radius: 14upx;
		text-indent: 20upx;
	}
</style>
